<template>
	<public-view navType="other" navTitle="我的团队">
		<view class="content-teams flex f-d-c">
			<view class="lv-tab-box flex a-i-c j-c-b">
				<block v-for="(item, index) in lv_tabs" :key="item.id">
					<view class="tab-item flex f-d-c a-i-c" :class="lv_tabs_id === item.id?'active':'unactive'" @click="changeTab(item)">
						{{item.title}}
						<view class="line" :class="lv_tabs_id === item.id?'active-line':''">
							
						</view>
					</view>
				</block>
			</view>
			<block v-for="(item, index) in teams" :key="index">
				<view class="user-item-box">
					<view class="user-info-box flex j-c-b">
						<view class="left flex a-i-c">
							<image class="avatar" :src="item?.avatar || '@/static/logo.png'" mode=""></image>
							<view class="name-box flex f-d-c">
								<view class="name f-s-26 f-w-b l-h-36">
									{{ item?.nickname || 'user'}}
								</view>
								<view class="f-s-22 l-h-34" style="color: #7E7E7E;">
									绑定时间：{{item?.build_parent_time || ''}}
								</view>
							</view>
						</view>
						<view class="f-s-24" style="color: #929292;">
							推广{{item?.son_count || 0}}人
						</view>
					</view>
					<view class="money-order-box flex a-i-c j-c-b f-s-22" style="color: #222;">
						<view >
							{{item?.give_kickback || '0.00'}}元
						</view>
						<view class="">
							{{item?.kickback_count || 0}}个订单
						</view>
					</view>
				</view>
			</block>
		</view>
	</public-view>
</template>

<script>
	export default {
		data() {
			return {
				lv_tabs_id:1,
				lv_tabs:[],
				page:1,
				teams : [
					
				]
			};
		},
		onShow() {
			console.log(this.$root)
			this.getTeams()
			// this.paya()
		},
		onReachBottom() {
			this.page++
			this.getTeams()
		},
		methods:{
			changeTab(item){
				this.lv_tabs_id = item.id
				this.teams = []
				this.page = 1
				this.getTeams()
			},
			getTeams() {
				let that = this
				that.util.getRequest({
					url:'v1/distributor/teams',
					data: {
						rows:10,
						page:that.page,
						level:that.lv_tabs_id
					}
				}).then(res => {
					let data = res.data
					that.lv_tabs = data.levels
					if(that.page === 1){
						that.teams = data.teams.data
					}else{
						if(data.teams.data.length>0){
							that.teams = that.teams.concat(data.teams.data)
						}else{
							// that.page--
						}
					}
					
				}).catch(err => {
					uni.showToast({
						icon:'none',
						title:err.msg
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-item-box{
		width: 100%;
		background: #FFFFFF;
		padding: 32upx;
		.money-order-box{
			padding-top: 24upx;
			width: 100%;
		}
		.user-info-box{
			width: 100%;
			padding-bottom: 24upx;
			border-bottom: 2upx solid #F0F0F0;
			.left{
				.avatar{
					border-radius: 50%;
					width: 64upx;
					height: 64upx;
					margin-right: 28upx;
				}
			}
		}
	}
	.lv-tab-box{
		width: 100%;
		padding: 118upx;
		margin-bottom: 32upx;
		.tab-item{
			position: relative;
		}
		.active{
			color: #333333;
		}
		.unactive{
			color: rgba(51, 51, 51, 0.4);
		}
		.line{
			position: absolute;
			bottom: -10upx;
			width: 40upx;
			height: 4upx;
			background: #2567F3;
			border-radius: 4upx;
			transform: scale(0);
			transition: all .1s linear;
		}
		.active-line{
			transform: scale(1);
		}
	}
	.content-teams{
		width: 100%;
		
	}
</style>
